<!DOCTYPE html>

<html lang="zh-CN">

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<title>高速公路大屏可视分析系统</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/app.css" />
</head>

<body class="bg06">
	<header class="header">
		<h3>高速公路大屏可视分析系统</h3>
	</header>

	<div class="wrapper">
		<div class="container-fluid">
			<div class="row fill-h">
				<div class="col-lg-3 fill-h">
					<div class="xpanel-wrapper xpanel-wrapper-1-2">
						<div class="xpanel">
							<div class="fill-h" id="wordChart"></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-1-2">
						<div class="xpanel">
							<div class="fill-h" id="ballChart"></div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 fill-h">
					<div class="xpanel-wrapper xpanel-wrapper-1">
						<div class="xpanel no-padding no-bg">
							<ul class="btn-wrap" style="z-index: 99;">
								<li class="btn" onclick="addRouteType()">叠加路况</li>
								<li class="btn" onclick="removeRouteType()">删除路况</li>
							</ul>
							<div class="fill-h" id="fireworksChart"></div>
						</div>
					</div>
				</div>
				<div class="col-lg-3 fill-h">
					<div class="xpanel-wrapper xpanel-wrapper-2-3">
						<div class="xpanel">
							<div class="fill-h" id="relationChart"></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-1-3">
						<div class="xpanel">
							<div class="fill-h" id="mapChart"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
	<script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
	<script type="text/javascript" src="js/echarts-liquidfill.min.js"></script>
	<script type="text/javascript" src="js/echarts-map-china.js"></script>
	<script type="text/javascript" src="http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script>

	<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=idcSzTt4LsCAxubYMcv0ghIPzgqgZFDL"></script>

	<script type="text/javascript">

		/*************** 中国地图 **************/
		//初始化echarts实例
		const mapChart = echarts.init(document.getElementById("mapChart"));
		(function () {
			let data = [
				{ "name": "辽宁", "value": 77 },
				{ "name": "吉林", "value": 42 },
				{ "name": "黑龙江", "value": 72 },
				{ "name": "四川", "value": 81 },
				{ "name": "湖北", "value": 47 },
				{ "name": "福建", "value": 67 },
				{ "name": "深圳", "value": 82 },
				{ "name": "广东", "value": 66 },
				{ "name": "重庆", "value": 24 },
				{ "name": "湖南", "value": 92 },
				{ "name": "上海", "value": 95 },
				{ "name": "江苏", "value": 91 },
				{ "name": "浙江", "value": 94 },
				{ "name": "安徽", "value": 64 },
				{ "name": "北京", "value": 91 },
				{ "name": "天津", "value": 65 },
				{ "name": "山东", "value": 98 },
				{ "name": "山西", "value": 83 },
				{ "name": "河南", "value": 100 },
				{ "name": "河北", "value": 70 },
				{ "name": "内蒙古", "value": 11 },
				{ "name": "江西", "value": 23 },
				{ "name": "贵州", "value": 45 },
				{ "name": "云南", "value": 36 },
				{ "name": "西藏", "value": 9 },
				{ "name": "陕西", "value": 21 },
				{ "name": "甘肃", "value": 54 },
				{ "name": "青海", "value": 48 },
				{ "name": "宁夏", "value": 36 },
				{ "name": "新疆", "value": 24 },
				{ "name": "广西", "value": 68 },
				{ "name": "海南", "value": 99 },
				{ "name": "台湾", "value": 88 }
			];

			let opt = {
				visualMap: {
					show: false,
					orient: 'horizontal',
					left: 'left',
					top: 'top',
					itemWidth: 5,
					calculable: true,
					seriesIndex: [0],
					inRange: {
						color: ['#aed8fe', '#57a1fc', '#3a73b8', '#2B32B2']
					}
				},
				geo: {
					map: 'china',
					roam: false, //开启鼠标缩放和漫游
					zoom: 1, //地图缩放级别
					selectedMode: false, //选中模式：single | multiple
					left: 0,
					right: 0,
					top: 0,
					bottom: 0,
					layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
					//layoutSize: '100%', //保持地图宽高比
					label: {
						emphasis: {
							show: true,
							textStyle: {
								fontSize: 10,
								color: '#fff'
							}
						}
					}
				},
				series: [{
					type: 'map',
					geoIndex: 0,
					data: data
				}]
			};
			mapChart.setOption(opt);
		})();

		/*************** 路况查询 **************/
		//初始化echarts实例
		const fireworksChart = echarts.init(document.getElementById("fireworksChart"));

		var map = new BMapGL.Map('fireworksChart');
		map.centerAndZoom(new BMapGL.Point(119.60, 39.93), 12);
		map.enableScrollWheelZoom(true);
		function addRouteType() {
			map.setTrafficOn(); // 叠加路况图层
		}
		function removeRouteType() {
			map.setTrafficOff(); // 关闭路况图层
		}
		/*************** 关系图 **************/
		//初始化echarts实例
		// const relationChart = echarts.init(document.getElementById("relationChart"));
		// var relationOpt;
		// relationChart.setOption(relationOpt);

		const globe3D = echarts.init(document.getElementById("relationChart"));
		//配置项
		const globeOpt = {
			globe: {
				environment: 'img/bg09.jpg', //环境贴图
				baseTexture: "img/globe.jpg", //地球的纹理
				heightTexture: "img/globe.jpg", //地图的高度纹理
				displacementScale: 0, //地球顶点位移的大小
				shading: 'realistic', //着色效果，真实感渲染
				realisticMaterial: { //真实感渲染配置
					roughness: 0.8 //材质的粗糙度
				},
				postEffect: { //后处理特效配置
					enable: true
				},
				light: { //光照设置
					main: { //场景主光源设置，在globe设置中就是太阳光
						intensity: 5, //主光源强度
						shadow: true //是否投影
					},
					ambientCubemap: { //使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射
						texture: 'img/pisa.hdr', //环境光贴图
						diffuseIntensity: 0.1 //漫反射强度
					}
				}
			}
		};
		//渲染图表
		globe3D.setOption(globeOpt);


		/*************** 水球 **************/
		//https://github.com/ecomfe/echarts-liquidfill
		//初始化echarts实例
		const ballChart = echarts.init(document.getElementById("ballChart"), 'dark');
		(function () {
			var ballOpt;

			ballOpt = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {            // 坐标轴指示器，坐标轴触发有效
						type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['重庆', '上海', '天津', '深圳', '北京', '杭州', '成都'],
						axisTick: {
							alignWithLabel: true
						},
						// axisLine: {
						// 	lineStyle: {
						// 		color: 'white',
						// 		width: 3,//这里是为了突出显示加上的，可以去掉
						// 	}
						// },
					}
				],
				yAxis: [
					{
						type: 'value',
						// axisLine: {
						// 	lineStyle: {
						// 		color: 'white',
						// 		width: 3,//这里是为了突出显示加上的，可以去掉
						// 	}
						// },
					}
				],
				series: [
					{
						name: '直接访问',
						type: 'bar',
						barWidth: '60%',
						data: [10, 52, 200, 334, 390, 330, 220]
					}
				]
			};

			ballChart.setOption(ballOpt);
		})();

		/*************** 词云 **************/
		//https://github.com/ecomfe/echarts-wordcloud
		//初始化echarts实例
		const wordChart = echarts.init(document.getElementById("wordChart"), 'dark');
		var app = {};

		var wordOpt;



		var cellSize = [80, 80];
		var pieRadius = 30;

		function getVirtulData() {
			var date = +echarts.number.parseDate('2017-02-01');
			var end = +echarts.number.parseDate('2017-03-01');
			var dayTime = 3600 * 24 * 1000;
			var data = [];
			for (var time = date; time < end; time += dayTime) {
				data.push([
					echarts.format.formatTime('yyyy-MM-dd', time),
					Math.floor(Math.random() * 10000)
				]);
			}
			return data;
		}

		function getPieSeries(scatterData, chart) {
			return scatterData.map(function (item, index) {
				var center = chart.convertToPixel('calendar', item);
				return {
					id: index + 'pie',
					type: 'pie',
					center: center,
					label: {
						normal: {
							formatter: '{c}',
							position: 'inside'
						}
					},
					radius: pieRadius,
					data: [
						{ name: '顺畅', value: Math.round(Math.random() * 24) },
						{ name: '一般', value: Math.round(Math.random() * 24) },
						{ name: '拥堵', value: Math.round(Math.random() * 24) }
					]
				};
			});
		}

		function getPieSeriesUpdate(scatterData, chart) {
			return scatterData.map(function (item, index) {
				var center = chart.convertToPixel('calendar', item);
				return {
					id: index + 'pie',
					center: center
				};
			});
		}

		var scatterData = getVirtulData();

		wordOpt = {
			tooltip: {},
			legend: {
				data: ['顺畅', '一般', '拥堵'],
				bottom: 20
			},
			calendar: {
				top: 'middle',
				left: 'center',
				orient: 'vertical',
				cellSize: cellSize,
				yearLabel: {
					show: false,
					fontSize: 30
				},
				dayLabel: {
					margin: 20,
					firstDay: 1,
					nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				},
				monthLabel: {
					show: false
				},
				range: ['2017-02']
			},
			series: [{
				id: 'label',
				type: 'scatter',
				coordinateSystem: 'calendar',
				symbolSize: 1,
				label: {
					show: true,
					formatter: function (params) {
						return echarts.format.formatTime('dd', params.value[0]);
					},
					offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
					fontSize: 14
				},
				data: scatterData
			}]
		};

		var pieInitialized;
		setTimeout(function () {
			pieInitialized = true;
			wordChart.setOption({
				series: getPieSeries(scatterData, wordChart)
			});
		}, 10);

		app.onresize = function () {
			if (pieInitialized) {
				wordChart.setOption({
					series: getPieSeriesUpdate(scatterData, wordChart)
				});
			}
		};

		if (wordOpt && typeof wordOpt === 'object') {
			wordChart.setOption(wordOpt);
		}
		// wordChart.setOption(wordOpt);

		/********** 窗口大小改变时，重置报表大小 ********************/
		window.onresize = function () {
			wordChart.resize();
			ballChart.resize();
			globe3D.resize();
			fireworksChart.resize();
			mapChart.resize();
		};

	</script>
</body>

</html>